<template>
  <!-- 访客记录-详情 -->
  <public-modal
    width="560px"
    :footer="false"
    :title="title"
    modalStyle="detailModal"
    :publicVisible="publicVisible"
    cancelContext="取消"
    confirmContext="提交"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content" class="content">
      <div class="search-group" style="width: 100%; padding: 0">
        <div class="input-wrap" style="width: 100%">
          <div class="label" style="min-width: 105px; color: #80b5eb">发现地点:</div>
          <div class="input-item" style="width: 100%; color: #abd5ff">
            {{ details.discoverySite }}
          </div>
        </div>
      </div>

      <div class="search-group" style="width: 100%; padding: 0">
        <div class="input-wrap" style="width: 100%">
          <div class="label" style="min-width: 105px; color: #80b5eb">所属辖区:</div>
          <div class="input-item" style="width: 100%; color: #abd5ff">
            {{ details.policeJurisdictionName || '暂无' }}
          </div>
        </div>
      </div>

      <div class="search-group" style="width: 100%; padding: 0">
        <div class="input-wrap" style="width: 100%">
          <div class="label" style="min-width: 105px; color: #80b5eb">负责民警:</div>
          <div class="input-item" style="width: 100%; color: #abd5ff">
            {{ details.policeName || '暂无' }}
          </div>
        </div>
      </div>

      <div class="search-group" style="width: 100%; padding: 0">
        <div class="input-wrap" style="width: 100%">
          <div class="label" style="min-width: 105px; color: #80b5eb">选择辖区:</div>
          <div class="input-item" style="width: 100%">
            <a-select
              ref="select"
              show-search
              placeholder="请选择辖区"
              @change="select_change"
              :filter-option="filterOption"
              :loading="jurisdictionLoading"
            >
              <a-select-option :value="item.id" v-for="(item, index) in police_list" :key="index">{{
                item.jurisdictionName
              }}</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      policeJurisdictionId: '',
      police_list: [],
      jurisdictionLoading: false,
    }
  },
  methods: {
    show(records) {
      this.title = records.policeJurisdictionName ? '重新分配' : '分配辖区'
      this.details = records
      this.publicVisible = true
      this.get_police_list()
    },

    async get_police_list(id) {
      let { policeAgencyId } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      this.jurisdictionLoading = true
      let {
        result: { records },
      } = await getAction('/police/jurisdiction/list', { policeAgencyId, pageSize: 99999 })
      this.jurisdictionLoading = false
      this.police_list = records.map((item) => ({
        id: item.id,
        jurisdictionName: item.jurisdictionName,
        principalPoliceUser: item.principalPoliceUser ? item.principalPoliceUser.name : '暂无',
      }))
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },

    select_change(id) {
      const matchedItem = this.police_list.find((item) => item.id === id)
      this.policeJurisdictionId = matchedItem.id
      this.details.policeName = matchedItem.principalPoliceUser
      this.details.policeJurisdictionName = matchedItem.jurisdictionName
    },

    async handleOk() {
      if (!this.policeJurisdictionId) {
        this.$message.error('请选择要分配的辖区')
        return
      }

      let res = await postAction('/common/risk_reporting/allocation', {
        id: this.details.id,
        policeJurisdictionId: this.policeJurisdictionId,
      })

      if (res.code == 200) {
        this.$message.success(res.message)
        this.$emit('refresh')
        this.cancel()
        return
      }

      this.$message.error(res.message)
    },
    cancel() {
      this.details = {}
      this.policeJurisdictionId = ''
      this.publicVisible = false
      this.$emit('refresh')
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 20px;
}

.content {
  height: 130px;
}

.ant-select-selection__placeholder {
  display: block;
}
</style>
